<template>
    <div id="followBox" class="follow-list" :style="`height:${height}px`">
        <div class="follow-card" v-for="(item, index) in followList" :key="index">
            <!--头像-->
            <div class="follow-avatar">
                <n-avatar v-if="item.avatar" round :size="60" :src="item.avatar" />
                <n-avatar v-else round :size="60">
                    <n-icon size="36">
                        <Person />
                    </n-icon>
                </n-avatar>
            </div>
            <!--昵称和个签-->
            <span class="follow-name" @click="goUserSpace(item.uid)">{{ item.name }}</span>
            <span class="follow-sign">{{ item.sign }}</span>
        </div>
    </div>
</template>

<script lang="ts">
import { useRouter } from "vue-router";
import { followUserType } from '@/types/follow';
import { onBeforeMount, ref, reactive, onBeforeUnmount, defineComponent } from "vue";
import { Person } from '@vicons/ionicons5';
import { getFollowingAPI, getFollowersAPI } from '@/api/follow';
import { NAvatar, NIcon, NScrollbar, useNotification } from "naive-ui";

export default defineComponent({
    props: {
        uid: {
            type: Number,
            default: 0,
        },
        following: {
            type: Boolean,
            default: false,
        },
        height: {
            type: Number,
            default: 600
        }
    },
    setup(props) {
        const pageInfo = reactive({
            current: 1,
            pageSize: 9
        });
        const noMore = ref(false);//没有更多
        const loading = ref(false);//加载中
        const followList = ref<Array<followUserType>>([]);
        const router = useRouter();
        const notification = useNotification();//通知

        //进入用户空间
        const goUserSpace = (uid: number) => {
            let userUrl = router.resolve({ name: "User", params: { uid: uid } });
            window.open(userUrl.href, '_blank');
        }

        //获取关注
        const getFollowingList = () => {
            getFollowingAPI(props.uid, pageInfo.current, pageInfo.pageSize).then((res) => {
                if (res.data.code === 2000) {
                    const resUser = res.data.data.users;
                    if (resUser) {
                        followList.value.push(...resUser);
                    }
                    if (!resUser || resUser.length < pageInfo.pageSize) {
                        noMore.value = true;
                    }
                    loading.value = false;
                }
            }).catch((err) => {
                notification.error({
                    title: '获取失败',
                    content: "原因:" + err.response.data.msg,
                    duration: 5000,
                })
            });
        }

        //获取粉丝
        const getFollowersList = () => {
            getFollowersAPI(props.uid, pageInfo.current, pageInfo.pageSize).then((res) => {
                if (res.data.code === 2000) {
                    const resUser = res.data.data.users;
                    if (resUser) {
                        followList.value.push(...resUser);
                    }
                    if (!resUser || resUser.length < pageInfo.pageSize) {
                        noMore.value = true;
                    }
                    loading.value = false;
                }
            }).catch((err) => {
                notification.error({
                    title: '获取失败',
                    content: "原因:" + err.response.data.msg,
                    duration: 5000,
                })
            });
        }

        const lazyLoading = (e:Event) => {
            if ((e.target as HTMLElement).id === "followBox") {
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                const clientHeight = document.documentElement.clientHeight;
                const scrollHeight = document.documentElement.scrollHeight;
                if (scrollTop + clientHeight >= scrollHeight) {
                    if (!noMore.value && !loading.value) {
                        pageInfo.current++;
                        loading.value = true;
                        if (props.following) {
                            getFollowingList();
                        } else {
                            getFollowersList();
                        }
                    }
                }
            }
        }

        onBeforeMount(() => {
            if (props.following) {
                getFollowingList();
            } else {
                getFollowersList();
            }
            window.addEventListener('scroll', lazyLoading, true);
        })

        onBeforeUnmount(() => {
            window.removeEventListener('scroll', lazyLoading);
        })

        return {
            noMore,
            loading,
            followList,
            lazyLoading,
            goUserSpace
        }
    },
    components: {
        NIcon,
        NAvatar,
        NScrollbar,
        Person
    },
})
</script>

<style lang="less" scoped>
.follow-list {
    overflow-y: scroll;

    /**修改滚动条样式 */
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 3px;
        background: #a3a3a3;
    }

    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 5px;
    }
}

.follow-card {
    height: 70px;
    position: relative;
    margin: 0 10px;
    border-bottom: 1px solid #d1d1d1;

    /**移除最后一个的底部边框 */
    &:last-child {
        border-bottom: none;
    }
}

.follow-avatar>span {
    margin-top: 5px;
    margin-left: 20px;
}

.follow-name {
    color: #333;
    position: absolute;
    top: 10px;
    left: 100px;
    font-weight: 600;
    cursor: pointer;
}

.follow-sign {
    position: absolute;
    top: 38px;
    left: 100px;
    font-size: 12px;
    color: #666;
}
</style>